<template>
  <el-container id="front" :class="{isNight:isNight}">
    <el-header>
      <my-header></my-header>
    </el-header>
    <el-main id="main">
      <router-view/>
    </el-main>
    <el-footer id="footer">
      <myFooter></myFooter>
    </el-footer>

    <div :class="{goTop:true,show:show}" @click="goBack">
      Top
    </div> 
  </el-container>
</template>

<script>
  import '@/common/js/bg.js' //引入背景
  import myHeader from '@/components/front/header.vue'
  import myFooter from '@/components/front/footer.vue'
  export default{
    components: {
      myHeader,
      myFooter
    },
    data(){
      return{
        isNight:false,
        show:true
      }
    },
    created(){
      //判断当前时间
      let hour = new Date().getHours()
      if(hour > 6 && hour < 18){
        this.isNight = false
      }else{
        this.isNight = true
      }
    },
    watch:{
      $route(curVal,oldVal){
        this.initShow()
        document.getElementById('main').children[0].scrollIntoView()
      }
    },
    mounted(){
      window.addEventListener('scroll',this.dealScroll, true) //1.监听滚动事件(第三个参数必须设置为true)
    },
    methods:{
      initShow(){
        this.show = true
      },
      dealScroll(e){ //监听滚动事件
        if(document.getElementById('blogDetail') != null){
          let top = document.getElementById('blogDetail').getBoundingClientRect().top
          if(top < 100){
            //显示回到顶部的按钮
            this.show  = false
          }else{
            this.show = true
          }
        }
        if(document.getElementById('blog') != null){
          let top = document.getElementById('blog').getBoundingClientRect().top
          if(top < 100){
            //显示回到顶部的按钮
            this.show  = false
          }else{
            this.show = true
          }
        }
        if(document.getElementById('time') != null){
          let top = document.getElementById('time').getBoundingClientRect().top
          if(top < 100){
            //显示回到顶部的按钮
            this.show  = false
          }else{
            this.show = true
          }
        }
      },
      goBack(){
        if(document.getElementById('blogDetail') != null){
          document.getElementById('blogDetail').scrollIntoView()
        }
        else if(document.getElementById('blog') != null){
          document.getElementById('blog').scrollIntoView()
        }
        else if(document.getElementById('time') != null){
          document.getElementById('time').scrollIntoView()
        }
      }
    }
  }
</script>

<style scoped>
  .isNight{
    background-color: #292929;
    color:#ccc !important;
  }
  #front{
    box-sizing: border-box;
    width:100%;
    height:100%; 
  }
  @media screen and (max-width:625px){
    #front{
      margin-left:2%;
      margin-right:2%;
    }
  }
  .el-header{
    box-sizing: border-box;
    margin:0 ;
    padding:0;
    width:100%;
    height:130px !important;
    z-index:1;
  }
  .el-main{
    padding-top:0;
    padding-bottom:0;
    padding-left:10%;
    padding-right:10%;
    height:100%;
    z-index:1;
  }
  .el-footer{
    box-sizing: border-box;
    margin:0 ;
    padding:0;
    width:100%;
    height:70px;  
    z-index:1;  
  }
  .goTop{
    z-index:1001;
    width:50px;
    height:50px;
    background-color:#fbfbfb;
    position: fixed;
    right:40px;
    bottom:80px;
    border-radius:50%;
    text-align: center;
    line-height:50px;
    cursor:pointer;
  }
  .show{
    display:none
  }
</style>
